<template>
  <div class="login-container">
	  <el-card class="box-card">
      <img src="../../../assets/img/logo.png" />
      <div class="title-container">
        <label class="title">{{system}}</label>
        <div style="display: flex; justify-content: center;">
          <new-lang-select class="set-language" @lang-change="changeLang"></new-lang-select>
        </div>
      </div>
      <el-form class="login-form" autoComplete="on" :model="loginForm" ref="loginForm" label-position="left">
        <el-form-item prop="username" :rules="filter_rules({required:true,length:[-1,50]})">
          <el-input type="text" v-model.trim="loginForm.username" autoComplete="on"
                    :placeholder="_$Z['userName']" prefix-icon="iconfont icon-userName"
                    size="small">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="filter_rules({required:true,length:[6,50]})">
          <el-input :type="passwordType" @keyup.enter.native.prevent="handleLogin" v-model="loginForm.password"
                    autoComplete="on" :placeholder="_$Z['password']" prefix-icon="iconfont icon-password"
                    size="small">
            <i slot="suffix" class="iconfont icon-seePassword show-pwd" @click="showPwd" />
          </el-input>
        </el-form-item>
        <el-button type="primary" size="medium" class="login-button"
                   :loading="loading" @click.native.prevent="handleLogin">{{_$Z['login']}}
        </el-button>
      </el-form>
	  </el-card>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
  .login-container {
    width: 100%;
    height: 100%;
    background-image: url("../../../assets/img/background.png");
    background-size: cover;
    .box-card {
      position: relative;
      top: 8%;
      width: 362px;
      height: 534px;
      margin: 0 auto;
    }
    img {
      display: block;
      margin: 0 auto;
    }
    .login-form {
      margin-top: 40px;
      padding: 0 28px;
      .login-button {
        width: 100%;
      }
    }
    .title-container {
      position: relative;
      .title {
        display: block;
        margin: 28px auto 12px;
        font-size: 22px;
        font-family: Tahoma, Verdana, 宋体;
        font-weight: bold;
        color: #6c7170;
        text-align: center;
      }
      .set-language {
        color: #fff;
      }
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      font-size: 16px;
      cursor: pointer;
      user-select: none;
    }
  }
</style>

<script>
import newLangSelect from '@/components/LangSelect'
export default {
  components: { newLangSelect },
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      passwordType: 'password',
      loading: false,
      showDialog: false,
      i18Keys: ['userName',
        'password',
        'login']
    }
  },
  computed: {
    system() {
      return config.SYSTEM_NAME
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/home' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    changeLang() {
      this.getI18(this.i18Keys)
    }
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  }
}
</script>